<template>
  <div class="plant-table-root mc-table">

    <el-table
      stripe
      height="100%"
      border
      @row-click="rowClick"
      size="mini"
      :data="tableData"
      style="width: 100%">


      <el-table-column label="地块名称">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.name" placement="top" effect="light">
            <div class="table-prop-place">
              {{scope.row.name}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="品名">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.partName" placement="top" effect="light">
            <div class="table-prop-place">
              {{scope.row.partName}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="权属">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.ownership" placement="top" effect="light">
            <div class="table-prop-place">
              {{scope.row.ownership}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="种植面积">
        <template slot-scope="scope">
          <el-tooltip :content="`${scope.row.plantArea}`" placement="top" effect="light">
            <div class="table-prop-place">
              {{scope.row.plantArea}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="是否播种" width="80">
        <template slot-scope="scope">
          <el-tooltip :content="`${scope.row.isSow}`" placement="top" effect="light">
            <div class="table-prop-place">
              {{scope.row.isSow}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="浇水次数" width="80">
        <template slot-scope="scope">
          <el-tooltip :content="`${scope.row.waterNum}`" placement="top" effect="light">
            <div class="table-prop-place">
              {{scope.row.waterNum}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="除草次数" width="80">
        <template slot-scope="scope">
          <el-tooltip :content="`${scope.row.weedNum}`" placement="top" effect="light">
            <div class="table-prop-place">
              {{scope.row.weedNum}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="追肥次数" width="80">
        <template slot-scope="scope">
          <el-tooltip :content="`${scope.row.fertilizerNum}`" placement="top" effect="light">
            <div class="table-prop-place">
              {{scope.row.fertilizerNum}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="病虫害防治次数" width="80">
        <template slot-scope="scope">
          <el-tooltip :content="`${scope.row.diseasesNum}`" placement="top" effect="light">
            <div class="table-prop-place">
              {{scope.row.diseasesNum}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="采收次数" width="80">
        <template slot-scope="scope">
          <el-tooltip :content="`${scope.row.harvestNum}`" placement="top" effect="light">
            <div class="table-prop-place">
              {{scope.row.harvestNum}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="晾晒次数" width="80">
        <template slot-scope="scope">
          <el-tooltip :content="`${scope.row.dryingNum}`" placement="top" effect="light">
            <div class="table-prop-place">
              {{scope.row.dryingNum}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="转入加工工厂次数" width="80">
        <template slot-scope="scope">
          <el-tooltip :content="`${scope.row.machingNum}`" placement="top" effect="light">
            <div class="table-prop-place">
              {{scope.row.machingNum}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>


      <el-table-column label="负责人">
        <template slot-scope="scope">
          <el-tooltip :content="`${getfzr(scope.row.dutyUserId)}`" placement="top" effect="light">
            <div class="table-prop-place">
              {{getfzr(scope.row.dutyUserId)}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tooltip :content="`${scope.row.status == 0 ?'正常':'失效'}`" placement="top" effect="light">
            <div class="table-prop-place">
              {{scope.row.status == 0 ?'正常':'失效'}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click.stop="goDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>


    </el-table>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import router from '@/router/index'

  export default {
    name: 'plant-table',
    props: {
      tableData: {
        type: Array,
        default: []
      }
    },
    setup(props, content) {
      let data = reactive({})
      const rowClick = row => {
        content.emit('rowClick', row)
      }
      const goDetail = row => {
        content.emit('goDetail', row)
      }
      const getfzr = (fUser) => {
        if (!fUser) {
          return ''
        }
        return fUser.map(user => user.nickName).toString()
      }
      return { ...toRefs(data), rowClick, getfzr, goDetail }
    }
  }
</script>

<style scoped lang="scss">
  .plant-table-root {
    height: 100%;

    .table-prop-place {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
</style>

<style lang="scss">
  .plant-table-root {
    .el-button.el-button--text.el-button--mini {
      padding: 0;
    }

    .el-table__row {
      cursor: pointer;
    }
  }

</style>
